import React, { useState } from 'react'

import Menu from "./Menu"

import "./App.css"
import {permits} from "./data"

export default function App() {
  const [unFoldRef, setUnFoldRef] = useState(null)
  const list = JSON.parse(JSON.stringify(permits))

  const menus = ()=>{
    const top = list.find(p=>p.parentId===0)
    generator(top, list)
    return <ul>{top.ui}</ul>
  }

  const generator= (p, list)=>{
    const children = list.filter(c=>c.parentId===p.id)
    let parentProps = {...p, unFoldRef, setUnFoldRef}

    if(children && children.length>0){
      const uis = []
      children.forEach(c => {
        generator(c, list)
        uis.push(c.ui)
      });
      parentProps = {...parentProps, children:uis}
      if(p.parentId!==0){
        p.ui = <Menu key={p.id} {...parentProps} />
      }else{
        p.ui = <Menu {...parentProps} />
      }
    }else{
      p.ui = <Menu key={p.id} {...parentProps} />
    }
  }

  return (
  <nav>
    {
      menus()
    }
  </nav> 
  )
}
